<template>
	<div class="d-flex justify-content-between align-align-items-center w-100 position-relative">
		<div
			@click.stop="$emit('onClickCurrent')"
			class="rounded-pill border px-3 py-2 me-5 cursor-pointer my-2 flex-shrink-0 currentCategory text-center"
		>
			<span class="text-muted">{{ current || empty }}</span>
			<ArrowRightIcon width="12" height="12" class="filter-invert-1 opacity-25 translate-y--10 ms-1" />
		</div>
		<slot name="panel" />
		<div class="videoCats d-flex align-items-center justify-content-end text-ellipsis">
			<span
				@click="$emit('onClickCat', item)"
				:class="{ selected: current === item.name }"
				v-for="item in categoryList"
				:key="item.id"
				class="videoCat rounded-pill px-3 py-1 hover-opacity text-secondary"
				>{{ item.name }}</span
			>
		</div>
	</div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
	emits: ["onClickCurrent", "onClickCat"],
	props: {
		categoryList: {
			type: Array,
			default: [],
		},
		empty: {
			type: String,
			default: "全部",
		},
		current: {
			type: String,
			default: "全部歌单",
		},
	},
	setup() {
		return {
			console: window.console,
		};
	},
});
</script>

<style scoped lang="scss">
.currentCategory {
	min-width: 90px;
	max-width: 120px;
}
.videoCats {
	width: 80%;
	.videoCat + .videoCat {
		margin-left: 7px;
	}
}
.primaryTheme {
	.videoCat {
		&:hover {
			color: $primary !important;
		}
	}
	.selected {
		color: $primary !important;
		background-color: rgba($color: $primary, $alpha: 0.1);
	}
}
.darkTheme {
	.videoCat {
		&:hover {
			color: $dark !important;
		}
	}
	.selected {
		color: $dark !important;
		background-color: rgba($color: $dark, $alpha: 0.1);
	}
}
.freeTheme {
	.videoCat {
		&:hover {
			color: $free !important;
		}
	}
	.selected {
		color: $free !important;
		background-color: rgba($color: $free, $alpha: 0.1);
	}
}
</style>
